<template>
    <div>
        <el-card>
            <!-- 头部功能区 -->
            <el-row>
                <!-- <el-form inline> -->
                <!-- 新增搜索 -->
                <!-- <el-form-item>
                        <el-input size="mini"
                        v-model=""
                                  placeholder="请输入报告名称" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary"
                                   icon="el-icon-search"
                                   size="mini">搜索</el-button>
                    </el-form-item>
                </el-form> -->
            </el-row>
            <!-- 编辑弹框 -->
            <!-- <el-dialog title="编辑">
                <el-form ref="editForm">
                    <el-form-item label="备注"
                                  prop="remarsk"
                                  label-width="100px">
                        <el-input autocomplete="off"
                                  placeholder="请输入备注信息"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer"
                     class="dialog-footer">
                    <el-button>取 消</el-button>
                    <el-button type="primary">确定</el-button>
                </div>
            </el-dialog> -->
            <!-- 列表 -->
            <el-row>
                <el-table v-loading="loading"
                          :data="tableData"
                          style="width: 100%"
                          height="calc(100vh - 140px)"
                          :cell-style="cellStyle"
                          :default-sort="{ prop: 'date', order: 'descending' }">
                    <el-table-column show-overflow-tooltip="ture"
                                     prop="taskName"
                                     align="center"
                                     label="任务名称">
                    </el-table-column>
                    <el-table-column show-overflow-tooltip="ture"
                                     prop="ip"
                                     align="center"
                                     label="巡检对象">
                    </el-table-column>
                    <el-table-column show-overflow-tooltip="ture"
                                     prop="host"
                                     label="主机名"
                                     align="center">
                        <template slot-scope="scope">
                            <el-tag type="primary">{{ scope.row.host }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip="ture"
                                     prop="taskType"
                                     align="center"
                                     label="巡检方式">
                        <template slot-scope="scope">
                            <el-tag type="primary">{{ scope.row.taskType | status }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip="ture"
                                     prop="checkTime"
                                     align="center"
                                     label="巡检时间">
                    </el-table-column>
                    <el-table-column label="操作"
                                     align="center"
                                     width="300">
                        <template slot-scope="scope">
                            <el-button size="mini"
                                       type="primary"
                                       style="margin-right: 10px"
                                       @click="rowClick(scope.row)">详情</el-button>

                        </template>
                    </el-table-column>
                </el-table>
            </el-row>
        </el-card>

        <!-- 主机巡检弹窗 -->
        <el-dialog title="提示"
                   :visible.sync="DialogVisible"
                   width="30%"
                   center>
            <el-form label-width="80px"
                     :model="form"
                     size="mini">
                <el-form-item label="选择主机">
                    <el-checkbox :indeterminate="isIndeterminate"
                                 v-model="checkAll"
                                 @change="handleCheckAllChange">全选</el-checkbox>
                    <div style="margin: 15px 0"></div>
                    <el-checkbox-group v-model="form.checkedCities"
                                       @change="handleCheckedCitiesChange">
                        <el-checkbox v-for="city in cities"
                                     :label="city"
                                     :key="city">{{
                            city
                        }}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="启动方式">
                    <el-select v-model="form.actionMethod"
                               placeholder="请选择"
                               size="mini">
                        <el-option v-for="item in options"
                                   :key="item.value"
                                   :label="item.label"
                                   :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="启动时间"
                              v-if="!form.actionMethod">
                    <el-date-picker v-model="form.date"
                                    type="datetime"
                                    placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
            </el-form>

            <span slot="footer"
                  class="dialog-footer">
                <el-button @click="DialogVisible = false">取 消</el-button>
                <el-button type="primary"
                           @click="DialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
    import {
        gethealthexamination_Api, //获取应用程序列表
    } from "@/api/automated/host.js";
    export default {
        data () {
            return {
                loading: true,
                //列表数据
                tableData: [],
                //主机巡检表单
                form: {
                    checkedCities: [], //选中的主机
                    actionMethod: true, //启动方式
                    date: "", //时间
                },
                //主机巡检弹窗
                DialogVisible: false,
                checkAll: false, //全选
                cities: [
                    "192.15.251.15",
                    "125.151.151.11",
                    "151.131.16.11",
                    "133.115.7.77",
                ], //多选项
                isIndeterminate: true,
                //启动方式
                options: [
                    {
                        value: true,
                        label: "立即启动",
                    },
                    {
                        value: false,
                        label: "定时启动",
                    },
                ],
            };
        },
        methods: {
            //主机巡检多选
            handleCheckAllChange (val) {
                this.form.checkedCities = val ? this.cities : [];
                this.isIndeterminate = false;
            },
            handleCheckedCitiesChange (value) {
                let checkedCount = value.length;
                this.checkAll = checkedCount === this.cities.length;
                this.isIndeterminate =
                    checkedCount > 0 && checkedCount < this.cities.length;
            },
            //点击行
            rowClick (row, column, event) {
                this.$router.push({ path: "AnalysisReport?id=" + row.id });
            },
            //获取列表数据
            getList () {
                gethealthexamination_Api().then((res) => {
                    console.log(res)
                    this.tableData = res.rows;
                    this.loading = false
                });
            }
        },
        created () {
            //查询列表数据
            this.getList()
        },
        computed: {},
        filters: {
            //过滤严重性
            status (val) {
                switch (val) {
                    case 0:
                        return "手动";
                    case 1:
                        return "自动";
                }
            },
        },
    };
</script>
<style lang="scss" scoped></style>
